<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024/5/22
  Time: 16:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生角色使用---学生信息更新</title>
</head>
<body>
<div class="container">
    <jsp:include page="../top.jsp"/>
    <div id="cont"class="row">
        <section class="col-sm-8 offset-sm-2">
            <form novalidate id="updateForm" method="post">
                <!--第一行-->
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label>系统标识：</label>
                    <input type="text" class="form-control" name="id"
                           value="${requestScope.dto.id}"
                           readonly />
                  </div>
                  <div class="form-group col-md-6">
                    <label>学号：</label>
                    <input type="text" class="form-control" name="no"
                           value="${dto.no}"
                           required/>
                    <div class="invalid-feedback">学号不能为空</div>
                  </div>
                </div>

                <!--第二行-->
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label>姓名：</label>
                    <input type="text" class="form-control" name="realName"
                           value="${dto.realName}"
                           required />
                    <div class="invalid-feedback">姓名不能为空</div>
                  </div>
                  <div class="form-group col-md-6">
                    <label>生日：</label>
                    <input type="text" class="form-control" name="birthDay" id="birthDay"
                           readonly
                           required
                           value="${dto.birthDay}"/>
                    <div class="invalid-feedback">生日不能为空</div>
                  </div>
                </div>

                <!--第三行-->
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label>手机：</label>
                    <input type="text" class="form-control" name="phone" autocomplete="off"
                           required
                           value="${dto.phone}"/>
                    <div class="invalid-feedback">手机不能为空</div>
                  </div>
                  <div class="form-group col-md-6">
                    <label>邮箱：</label>
                    <input type="email" class="form-control" name="email"
                           required
                           value="${dto.email}"/>
                    <div class="invalid-feedback">请输入符合格式的邮箱</div>
                  </div>
                </div>
                <div class="form-group">
                  <label c1ass="d-block">免冠照：</label>
                    <!--使用图片点击弹出文件选择框，代替默认的type=file不好看的样式-->
                  <div class="img-show">
                    <img class="img-fluid"
                         onclick="openFileSelect()"
                         src="<%=request.getContextPath()%>/${dto.photoPath}" id="photoImg"/>
                    <input type="file" onchange="fileSelected()" class="d-none" name="file" id="fileInput"/>
                    <input type="hidden" class="addressablePhotoPath" id="addressablePhotoPath" />
                  </div>
                </div>
                <div class="d-flex justify-content-around">
                  <input type="button" id="modify" class="btn btn-primary" value="修改"/>
                  <a class="btn btn-primary" href="#" onclick="history.go(-1)">返回</a>
                </div>
            </form>
        </section>
    </div>
    <script>
        $("#modify").on("click",function () {
            var validateResult = document.getElementById("updateForm").checkValidity();
            $("#updateForm").addClass("was-validated");
            if (!validateResult) {
                return;
            }
            $.ajax({
                type:'post',
                url:"<%=request.getContextPath()%>/admin/updateStudent",
                data:formDataObj("#updateForm"),
                success:function (result) {
                    if (result.success) {
                        location.href ='<%=request.getContextPath()%>/admin/toStudentManage?pageNow=${requestScope.pageNow}'
                    } else {
                        $("#tipCont").text(result.errMsg);
                        $("#tipModal").modal("show");
                    }
                }
            });
        })

        //点击打开文件选择窗口
        function openFileSelect(){
            //间接调用type=file的属性的方法，调用这个属性，使得其弹出窗口
           $("#fileInput").click()
        }

        /**
         * 当文件被选择的时候，会调用type=file的input的onchange事件指定的函数
         */
        function fileSelected(){
            //jquery获取上传的文件对象数组
            //这里使用jquery来调用files属性的话，报undefined
            var fileObj = document.getElementById("fileInput").files;
            //未定义类型、大小为空(表示为选择内容)
            if(typeof  fileObj == "undefined" || fileObj.size<=0){
                //提示
                $("#tipCont").text("Please Select The Photo You Select!")
                $("#tioModal").text("show")
            }
            
            //构造formData：ajax提交文件需要使用到的数据
            var formData = new FormData();
            formData.append("photoImgFile",fileObj);
            //上传发送文件数据(也可以直接使用xhr对象来发送)
            $.ajax({
                type:'post',
                url:'<%=request.getContextPath()%>/upload',
                data:formData,
                //上传文件时的content-type需要设置为false
                contentType:false,
                //processData设置为false，用于对data的值进行转换，转为查询字符串
                //查询字符串：路径?参数=值&参数=值
                processData:false,
                //避免浏览器缓存导致的文件上传请求不发送
                cache:false,
                success:function (result) {
                    if(result.success){
                        //完成上传之后，需要得到一个上传后的地址
                        //上传之后，回显图片，本质就是修改img标签的src属性
                        $("#photoImg").attr("src",result.data);
                        //location.href = "<%=request.getContextPath()%>/admin/toStudentManage";
                        //保存上传的图片的地址
                        //点击“修改按钮”的时候，一起提交到后台用于更新数据库
                        $("#addressablePhotoPath").val(result.data)
                    }else{
                        $("#tipCont").text(result.errMsg);
                        $("#tioModal").modal("show")
                    }
                }
            })
        }

        //更新个人信息(主要是将上传的图片路径保存到数据库中)
        function updateStudent(){
            $.ajax({
                type:"post",
                url:'<%=request.getContextPath()%>/student/update',
                data:formDataObj("#updateForm"),
                success:function (result) {
                    if (result.success) {
                        $("#tipCont").text(result.data);
                        ("#tipModal").modal("show");
                    } else
                        ("#tipCont").text(result.errMsg);
                    ("#tipModal").modal("show")
                }
            });
        }
    </script>
</body>
</html>
